<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");
        // for(var i=0;i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         console.log(i);
        //     }
        // }

        // console.log(i);

        // 1.第一种 ： 通过let 声明for循环；

        // for(let i=0;i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         console.log(i);
        //     }
        // }

        // 2.第二种方式 ： 通过绑定元素对象
        // for(var i=0;i<lis.length;i++){
        //     lis[i].index = i;
        //     lis[i].onclick = function(){
        //         // console.log(i);
        //         // 获取到点击的对象，this 在事件里会指向事件源；
        //         console.log(this.index);
        //     }
        // }
        /* 
        var i=0;
        var i=1
        var i=2
        var i=3;
            var li1 = {
                index:0
            }
        
             var li2 = {
                index:1
            }

              var li3 = {
                index:2
            }
         */

        // 3.通过函数作用域 来保持i值；

        for (var i = 0; i < lis.length; i++) {
            (function (a) {
                lis[a].onclick = function () {
                    console.log(a);
                    // 获取到点击的对象，this 在事件里会指向事件源；
                }
            })(i)
        }

// 定义一个函数；
        // var fn = function(){
        //     console.log("fn");
        // }
// 调用一个函数；
// fn();

// 自执行函数，立刻执行函数 ；定义之后立刻调用；创建一个函数作用域出来；
// (function(a){  // 形参
//     console.log(a);
// })(1) //实参



    </script>
</body>

</html>